<script lang="ts">
export default {
  name: "xt-input",
};
</script>

<script setup lang="ts">
import { ElInput } from "element-plus";
import debounce from "lodash/debounce";
import { computed } from "vue";
import Typings from "../../../typings";
interface Props {
  type?: string;
  placeholder?: string;
  clearable?: boolean;
  debounce?: number;
  debounceOptions?: Typings.Input.debounceOptions;
}

const props = withDefaults(defineProps<Props>(), {
  type: "text",
  placeholder: "请输入",
  clearable: true,
  debounce: 300,
  debounceOptions: {
    leading: true,
    trailing: true,
  },
});

const emit = defineEmits(["input"]);

// textarea 默认设置
const textareaDefaultProp = computed(() => {
  if (props.type === "textarea")
    return {
      autosize: { minRows: 6 },
      maxlength: 2000,
      showWordLimit: true,
    };

  return {};
});

const handleInput = debounce(
  function () {
    emit("input");
  },
  props.debounce,
  props.debounceOptions
);
</script>

<template>
  <el-input
    class="xt-input"
    :type="type"
    :placeholder="placeholder"
    :clearable="clearable"
    v-bind="textareaDefaultProp"
    @input="handleInput"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-input>
</template>

<style lang="scss">
@use "../../../scss/xt-input.scss";
</style>
